<template>
	<div class="home">
		<div class="head">
			<img src="../../assets/images/logo.png" alt="" class="logo">
			<router-link tag='div' to='/home/Announcement' class="right" v-if="userInfo.user_id || userInfo.code"><i class="iconfont icon-gonggao"></i>公告</router-link>
			<router-link tag='div' to='/login' class="right" v-else>登录</router-link>
		</div>

		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,index) in bannerImg" :key='index'>
					<img :src="item.image" alt="">
				</div>
			</div>
		</div>

		<router-link to='home/delegate' class="list delegate">
			<span>我的委托</span>
			<i class="iconfont icon-jiantou"></i>
		</router-link>
		<router-link to='home/Announcement' tag="div" class="list announcement">
			<span>公告</span>
			<b class="firstNews">{{this.newsData.post_title}}</b>
			<i class="iconfont icon-jiantou"></i>
		</router-link>
		<div class="list quotes">
			<span>TXL行情</span>
			<p>当前市值 <b>{{ currentPrice }}</b></p>
		</div>

		<div class="Gtitle">TXL买卖盘</div>
		<transaction></transaction>
		<router-link tag="div" to='home/transaction' class="More">更多 <i class="iconfont icon-jiantou"></i></router-link>


		<!-- <div class="Gtitle">实时成交记录</div>
		<ul class="realTime">
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
			<li><p>09:55</p><p>1.22</p><p>35000.00</p></li>
		</ul> -->

		<div class="Gtitle">TXL市值走势</div>

		<div class="chartBox">
			<div class="con">
				<span v-for='(v,i) in time' :key='i' @click='btn(i)' :class='{checked: num == i}'>{{v}}</span>
			</div>
			<div id="container" style="height: 300px"></div>
		</div>
		<notice></notice>
		<router-view class="screen"/>
	</div>
</template>

<script>
import Notice from './Notice/Notice'
import { drawLine, btn } from '../../assets/js/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import Transaction from './transaction/transaction'
import { mapState } from "vuex";
import "../../assets/css/Swiper.css";
// import Swiper from "swiper";
import { articleLists, banner,lineData } from '../../config/getData';

export default {
	data() {
		return {
			buyIndex: 0,
			bannerImg:[],
			time:['日','周','月','年'],
			date:[],
			data:[],
			num:'0',
			currentPrice:'',
			arr:{
				date:[],
				data:[]
			},
			newsData:[]

		};
	},
	computed: {
		...mapState(["userInfo"])

	},
	mounted() {
		btn(1, this)
		drawLine(this);
	},
	methods: {
		btn(i){
			btn(i,this)
		}
	},
	components: {
		Transaction,
		Notice
	},
	created () {
		 articleLists().then(res =>{
			this.newsData = res.data.data[0] == undefined ? [] : res.data.data[0];
		 })

		 //banner
		 banner().then( res => {
			 this.bannerImg = res.data
			//  setTimeout( () => new Swiper(".swiper-container"), 0)
			//  ;
		 })
		 lineData('day').then(res =>{
			 this.currentPrice = res.url.price
		 })
	}
};
</script>


<style lang="scss" scoped>
@import '../../assets/css/all';

.screen{@include screen;}
.home{
	a{display: block;}
	.head{display: flex;justify-content: space-between;background-color: white;padding-left: 15px;
		.logo{width:200px;height:50px;background-color: white;}
		.right{line-height: 50px;font-size: 14px;padding:0 15px;
			i{margin-right:4px;}
		}
	}
	.swiper-container img{width:100%;height: 180px;;}
	.quotes b{color:#e86e50;}
	.Gtitle{margin:20px 0 6px 15px;}
	.delegate{margin-top:10px;}
	.list{line-height: 45px;background-color: white;padding:0 15px;display: flex;justify-content: space-between;font-size:14px;}
	.list + .list{margin-top:1px;}
	.announcement b{text-align: right;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width:70%;}

	.More{text-align: center;font-size:14px;line-height:40px;border-top:1px solid #f5f5f5;background-color: white;
		i{font-size:14px;}
	}
	.realTime{background-color: white;
		li{display: flex;justify-content: space-around;line-height: 40px;}
		li:nth-child(even){background-color: #f8f8f8;}
	}
	.chartBox{background-color: white;padding-top:10px;
		.con span{padding:0 15px;line-height: 26px;display:inline-block;background-color: #f5f5f5;margin:0 10px;border-radius: 2px;}
		.con span.checked{background-color: #409eff;color:white;}
	}
	.firstNews{
		text-align: left !important;
	}
}
</style>
